<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .ball {
        /* width: 50px;
            height: 50px;
            border-radius: 25px; */
        position: absolute;
      }
      .game {
        width: 62.5vw;
        height: 600px;
        background: #040000;
        border-radius: 30px;
        overflow: hidden;
        transform: perspective(30px) rotateX(0.2deg) translateZ(0);
        transform-origin: bottom;
        cursor: pointer;
        position: relative;
      }
    </style>
  </head>

  <body>
    <div class="game">
      <!-- <img src="https://cdn.shopify.com/s/files/1/1769/5297/files/11_2.png?v=1618465372" alt="Image">
        <img src="https://cdn.shopify.com/s/files/1/1769/5297/files/2_2.png?v=1618885592" alt="Image">
        <img src="https://cdn.shopify.com/s/files/1/1769/5297/files/6_2.png?v=1618885592" alt="Image"> -->
    </div>
    <!-- <button onclick="DOMrealize()">DOM实现</button> -->
    <script>
      let aBall = [];
      const game = document.getElementsByClassName("game")[0];
      const gameWidth = game.getBoundingClientRect().width;
      const gameHeight = game.getBoundingClientRect().height;
      const imgList = [
        "https://cdn.shopify.com/s/files/1/1769/5297/files/11_2.png?v=1618465372",
        "https://cdn.shopify.com/s/files/1/1769/5297/files/2_2.png?v=1618885592",
        "https://cdn.shopify.com/s/files/1/1769/5297/files/6_2.png?v=1618885592",
      ];
      class Ball {
        minSpeed = 2; // 最小速度
        maxSpeed = 30; // 最大速度
        speedX = this.random(this.minSpeed, this.maxSpeed);
        speedY = this.random(this.minSpeed, this.maxSpeed);
        x = this.random(0, gameWidth - 10); // 初始化X
        y = this.random(0, gameHeight - 10); // 初始化y
        img = null;
        constructor() {
          this.img = document.createElement("img");
          this.img.className = "game-img";
          this.img.style.position = "absolute";
          this.img.style.maxWidth = "18.7vw";
          this.img.style.maxHeight = "12.27vw";
        }
        random(min, max) {
          return ~~(Math.random() * (max - min) + min);
        }
      }
      for (let i = 0; i < imgList.length; i++) {
        const ball = new Ball();
        ball.img.src = imgList[i];
        game.appendChild(ball.img);
        aBall.push(ball);
      }
      move();
      function move() {
        for (var i = 0; i < aBall.length; i++) {
          draw(aBall[i]);
          updata(aBall[i]);
        }
        requestAnimationFrame(move);
      }
      function draw(obj) {
        obj.img.style.top = obj.y + "px";
        obj.img.style.left = obj.x + "px";
      }
      function updata(obj) {
        const objWidth = obj.img.getBoundingClientRect().width;
        const objHeight = obj.img.getBoundingClientRect().height;
        obj.x = obj.img.offsetLeft + obj.speedX;
        obj.y = obj.img.offsetTop + obj.speedY;
        if (obj.x < -(objWidth + 50)) {
          obj.x = -(objWidth + 50);
          obj.speedX *= -1;
        }
        if (obj.y < -(objHeight + 50)) {
          obj.y = -(objHeight + 50);
          obj.speedY *= -1;
        }
        if (obj.x > gameWidth + objWidth) {
          obj.x = gameWidth + objWidth;
          obj.speedX *= -1;
        }
        if (obj.y > gameHeight + objHeight) {
          obj.y = gameHeight + objHeight;
          obj.speedY *= -1;
        }
      }
      console.log(aBall);
    </script>
  </body>
</html>
